import type { ViewChartPieProps } from './type'
import { CHART } from '@/constant'
import type { DesignStore } from '@/types'
import { useChartTooltipTheme } from '@/mixins/MixinChartTooltipTheme'
// import { VChartViewChartLineProps } from '@/types';
export const DEFAULT_DATASET = {
  dimensions: [
    {
      name: 'category',
      displayName: '状态',
    },
    'value',
  ], // 指定维度名称
  source: [
    { category: '正常', value: 30 },
    { category: '停机', value: 10 },
    { category: '保养', value: 15 },
    { category: '维修', value: 23 },
  ],
}

const tooltipTheme = useChartTooltipTheme()
export const DEFAULT_OPTION = {
  title: CHART.defaultTitle,
  tooltip: {
    trigger: 'item',
    // formatter: '{a}<br />{c}({d}%)'
    formatter: ({ seriesName, name, value, color, percent }: any) => {
      return `
        <div style="margin: 0px 0 0;line-height:1;">
          <div style="font-size:14px;color:var(--el-text-color-regular);font-weight:400;line-height:1;">${seriesName}</div>
          <div style="margin: 10px 0 0;line-height:1;">
            <div style="margin: 0px 0 0;line-height:1;">
              <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>
              <span style="font-size:14px;color:var(--el-text-color-regular);font-weight:400;margin-left:2px">${name}</span>
              <span style="font-size:14px;color:var(--el-text-color-regular);font-weight:400;margin-left:5px;font-weight:900">${value[1]}</span>
              <span style="float:right;margin-left:10px;font-size:14px;color:var(--el-text-color-regular);">（${percent}%）</span>
              <div style="clear:both"></div>
            </div>
            <div style="clear:both"></div>
          </div>
          <div style="clear:both"></div>
        </div>
      `
    },
    ...tooltipTheme,
  },
  color: CHART.color,
  legend: {
    top: '5%',
    left: 'center',
  },
  grid: {
    ...CHART.defaultGrid,
  },
}

export function createOptionSeries(props: ViewChartPieProps, theme: DesignStore['theme']) {
  // console.log(123456);

  const themeColor = CHART.getThemeColor(theme)
  const itemStyle = (() => {
    if (
      Array.isArray(props.radius)
      && props.radius?.length
    ) {
      return {
        borderRadius: 10,
        borderColor: themeColor.bg,
        borderWidth: 2,
      }
    }
    else {
      return {
        show: false,
      }
    }
  })()
  const emphasis = (() => {
    if (props.emphasis) {
      return {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold',
          color: themeColor.text,
        },
      }
    }
    else {
      return {
        show: false,
      }
    }
  })()
  const o = {
    name: props.option.name,
    type: 'pie',
    seriesLayoutBy: props.seriesLayoutBy,
    radius: props.radius,
    avoidLabelOverlap: false,
    emptyCircleStyle: {
      opacity: 0,
    },
    itemStyle,
    label: props.option.label || {
      show: false,
      position: 'center',
    },
    emphasis,
    labelLine: props.option.labelLine || {
      show: false,
    },
    center: props.center,
  }
  return o
}
